<template>
  <div>
    <el-table :data="tableData" height="680" highlight-current-row @row-dblclick="getAlbumId" style="width: 100%">
      <el-table-column type="index" width="50">
      </el-table-column>
      <el-table-column prop="title" label="专辑" >
        <template slot-scope="scope">
          <img style="width: 70px;float: left" :src="scope.row.picUrl">
          <span style="line-height: 70px;margin-left: 10px;font-size: 20px">{{scope.row.title}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="作者" >
      </el-table-column>

    </el-table>
  </div>
</template>

<script>
  import musicApi from '@/musicApi/apis/songs'
  // import music from "@/until/js/music";
  export default {
    name: "searchAlbum",
    props: ["keywords", "type", 'receive'],
    data() {
      return {
        tableData: []
      }
    },
    mounted() {
      this.getAlbum(this.keywords, this.type)
    },
    methods: {
      //获取所搜专辑
      async getAlbum(keywords, type) {
        await musicApi.getSearch(keywords, type).then(res => {
          this.tableData = []
          let data = res.data.result.albums
          for (let i = 0; i < data.length; i++) {
            let obj = {}
            if (data[i].alias != '') {
              obj.title = data[i].name + '（' + data[i].alias[0] + ')'
            } else {
              obj.title = data[i].name
            }
            obj.id = data[i].id;
            obj.picUrl = data[i].picUrl
            if (data[i].artist.alias != '') {
              obj.name = data[i].artist.name + '（' + data[i].artist.alias[0] + '）'
            } else {
              obj.name = data[i].artist.name
            }
            this.tableData.push(obj)
          }
        })
      },
      //获取所在行信息
      getAlbumId(row) {
        this.$store.commit('SET_Album_Id', row.id);
        this.receive(0)
      }
    },
    computed: {
      WatchKeyword() {
        return this.keywords
      }
    },
    watch: {
      WatchKeyword: {
        handler(newKey) {
          this.$message({
            message: '专辑关键字更新啦',
            type: 'success'
          });
          this.getAlbum(newKey, this.type)
        }
      }
    }
  }
</script>

<style scoped>
  /* 隐藏伪元素 */
  ::v-deep.el-table::before {
    display: none !important;
  }

  /* // 更改表头背景颜色 */
  ::v-deep.el-table thead tr>th {
    background-color: #FFDAB9;
  }

  /* // 更改表格每行背景颜色 */
  ::v-deep.el-table tbody tr>td {
    background-color: #FFEFD5;
  }

  /* // 设置鼠标经过时背景颜色 */
  ::v-deep.el-table tbody tr:hover>td {
    background-color: #FFFFF0 !important;
  }
</style>